<template>
  <section>
    <el-card shadow="never">
      <el-form inline size="small">
        <el-form-item label="当前交易周期">
          <el-select
            class="selectStyle"
            v-model="value"
            placeholder="请选择"
            @change="selectChange"
          >
            <el-option
              v-for="item in options"
              :key="item.tpno"
              :label="item.name"
              :value="item.tpno"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-if="userRole !== 'grid'" type="primary" icon="el-icon-plus" @click="handleIssue">发布报价</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleCompares">
            交易数据比较
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog
      :title="dlgTitle"
      :visible.sync="dlgVib"
      @closed="closeDlg"
      append-to-body
      :width="width"
    >
      <component
        ref="dlgCpt"
        :is="dlgCpt"
        :data="dlgData"
        :action="action"
        :value="value"
        :tpnoOptions="options"
        @selected="selectedf"
        @close="closeDlg"
        @locale="locale"
        @refresh="refresh"
      />
    </el-dialog>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import Quotation from "../../common/quotation.vue";

@Component({
  components: {
    Quotation,
  },
})
export default class MyApplication extends Vue {
  // for diog
  protected dlgVib: boolean = false;
  protected dlgTitle: string = "";
  protected dlgCpt: any = null;
  protected width: any = "";
  protected options: any = [];
  protected value: any = null;
  protected nextValue: any = null;
  protected userRole: string = '';
  protected setIntervalCycle: any = null;
  protected action: any = "trading";

  protected created() {
    this.init();
    this.$nextTick(() => {
      const user = JSON.parse(localStorage.getItem("userInfo") as any);
      this.userRole = user && user.type;
    });
    this.setIntervalCycle = setInterval(() => {
      // this.init();
      // localStorage.setItem("tpno", this.value);
      this.$emit("TradingCycle", this.value);
    }, 60000);
  }

  protected beforeDestroy() {
    clearInterval(this.setIntervalCycle);
  }

  protected selectChange(val: any) {
    // localStorage.setItem("tpno", val);
    this.$emit("TradingCycle", val);
  }

  protected async init() {
    try {
      const params: any = {
        page_no: 1,
        page_size: 1000,
        // startime: new Date()
      };
      const res: any = await this.$api
        .getTradePeriodsQuery(params)
        .then((response: any) => {
          const {
            data: { trade_periods, current_tpno, next_tpno },
          } = response;
          this.value = current_tpno;
          localStorage.setItem("tpno", current_tpno);
          localStorage.setItem("currentTpno", current_tpno);
          localStorage.setItem("nextTpno", next_tpno);
          this.options = trade_periods.map((item: any, idx: number) => {
            return {
              item,
              tpno: item.tpno,
              starttime: item.starttime,
              endtime: item.endtime,
              name: `${item.tpno}\xa0\xa0\xa0\xa0\xa0${Vue.prototype.$fmtDate(
                item.starttime
              )}\xa0\xa0\xa0\xa0\xa0${Vue.prototype.$fmtDate(item.endtime)}`,
            };
          });
          // this.selectChange(this.value);
          this.$emit("TradingCycle", this.value);
        });
    } catch (error) {
      console.log(error);
    }
  }
  protected handleIssue() {
    if (!this.value) {
      this.$message.warning("请选择交易周期");
      return;
    }
    this.dlgTitle = "发布报价信息";
    this.dlgCpt = Quotation;
    this.dlgVib = true;
    this.width = "50%";
  }
  protected handleCompares() {
    this.$router.push({ path: "/dataCompare", name: "交易数据比较" });
  }

  protected closeDlg() {
    this.dlgTitle = "";
    this.dlgCpt = null;
    this.dlgVib = false;
    this.width = null;
  }

  protected refresh() {
    this.init();
    this.closeDlg();
  }
}
</script>

<style lang="scss" scoped>
.selectStyle {
  width: 23vw;
}
.el-form-item--small.el-form-item {
  margin-bottom: 0;
}
</style>


